The package rAmChart allows to draw JavaScript charts wich are by nature interactive. Its architecture is based on S4 classes and corresponds almost exactly to the original library AmCharts.
We do not focus on the htmlwidgets features which make a such API realizable. For more details consult directly http://www.htmlwidgets.org.
By loading the package, you will note that it is plainly compatible with other plot methods since it uses S4 signature for each functionnality.
## Loading required package: htmlwidgets
## Loading required package: shiny
## Loading required package: rlist
## Loading required package: pipeR
## Loading required package: data.table
##
## Attaching package: 'rAmChart'
##
## The following object is masked from 'package:graphics':
##
## titleFor the next part of this short introduction, you will always see the symbole %>>% from the package pipeR. If you want more details, you can refer to the its tutorial, but in this context we just have to keep in mind that thanks to this the code before is evaluated and passed as the first argument of the function which follow %>>% or it can can be any argument by indicating a . using () or {}.
For example:
data(iris)
summary(iris, digits = 2)## Sepal.Length Sepal.Width Petal.Length Petal.Width Species
## Min. :4.3 Min. :2.0 Min. :1.0 Min. :0.1 setosa :50
## 1st Qu.:5.1 1st Qu.:2.8 1st Qu.:1.6 1st Qu.:0.3 versicolor:50
## Median :5.8 Median :3.0 Median :4.3 Median :1.3 virginica :50
## Mean :5.8 Mean :3.1 Mean :3.8 Mean :1.2
## 3rd Qu.:6.4 3rd Qu.:3.3 3rd Qu.:5.1 3rd Qu.:1.8
## Max. :7.9 Max. :4.4 Max. :6.9 Max. :2.5is equivalent to:
library(pipeR)
data(iris)
iris %>>% summary( digits = 2 )## Sepal.Length Sepal.Width Petal.Length Petal.Width Species
## Min. :4.3 Min. :2.0 Min. :1.0 Min. :0.1 setosa :50
## 1st Qu.:5.1 1st Qu.:2.8 1st Qu.:1.6 1st Qu.:0.3 versicolor:50
## Median :5.8 Median :3.0 Median :4.3 Median :1.3 virginica :50
## Mean :5.8 Mean :3.1 Mean :3.8 Mean :1.2
## 3rd Qu.:6.4 3rd Qu.:3.3 3rd Qu.:5.1 3rd Qu.:1.8
## Max. :7.9 Max. :4.4 Max. :6.9 Max. :2.5or even
library(pipeR)
data(iris)
iris %>>% ( summary(object = ., digits = 2) )## Sepal.Length Sepal.Width Petal.Length Petal.Width Species
## Min. :4.3 Min. :2.0 Min. :1.0 Min. :0.1 setosa :50
## 1st Qu.:5.1 1st Qu.:2.8 1st Qu.:1.6 1st Qu.:0.3 versicolor:50
## Median :5.8 Median :3.0 Median :4.3 Median :1.3 virginica :50
## Mean :5.8 Mean :3.1 Mean :3.8 Mean :1.2
## 3rd Qu.:6.4 3rd Qu.:3.3 3rd Qu.:5.1 3rd Qu.:1.8
## Max. :7.9 Max. :4.4 Max. :6.9 Max. :2.5Begin with a simple pie chart
library(rAmChart)
amPieChart(theme ="light", titleField = "key", valueField = "value"
) %>>% setDataProvider(data.frame(key = c("FR", "US"), value = c(20,10))
) %>>% setLegend( position = "right"
) %>>% plotIf you would have seen the same example from a demonstration on http://www.amcharts.com/demos/, you’d read a javascript source code like this:
{
"type": "pie",
"theme": "light",
"dataProvider": [ {
"country": "FR",
"litres": 20
}, {
"country": "US",
"litres": 10
}],
"valueField": "litres",
"titleField": "country",
}Although the syntax appears very different, it has similarities. If you observe the result before calling the plot method, you see a global list containing each parameter precised in the code:
library(rAmChart)
amPieChart(theme ="light", titleField = "key", valueField = "value"
) %>>% setDataProvider(data.frame(key = c("FR", "US"), value = c(20,10))
)## $titleField
## [1] "key"
##
## $valueField
## [1] "value"
##
## $dataProvider
## $dataProvider[[1]]
## $dataProvider[[1]]$key
## [1] FR
## Levels: FR US
##
## $dataProvider[[1]]$value
## [1] 20
##
##
## $dataProvider[[2]]
## $dataProvider[[2]]$key
## [1] US
## Levels: FR US
##
## $dataProvider[[2]]$value
## [1] 10
##
##
##
## $theme
## [1] "light"
##
## $type
## [1] "pie"This list can be easily mapped to the previous JavaScript code with the following tips:
This structure and equivalencies are fundamental to construct charts with the package.
The key thing is to imagine the function
library(rAmChart)
amPieChart(theme ="light", titleField = "key", valueField = "value")as an initializer of an S4 class which is a list copntainer for every property.
library(rAmChart)
class(amPieChart())## [1] "AmChart"
## attr(,"package")
## [1] "rAmChart"dataProvider, has its dedicated function whose the first argument is always an object of S4 class AmChart (or AmStock).Currently you can draw any chart from: * http://docs.amcharts.com/3/javascriptcharts * http://docs.amcharts.com/3/javascriptstockchart
That means you can customize you chart in various ways !
For instance, we can move the default linked label JS chart by amCharts, which must be kept for using the library without license. We also can switch the theme:
library(rAmChart)
amPieChart(theme ="chalk", titleField = "key", valueField = "value",
creditsPosition = "bottom-left"
) %>>% setDataProvider(data.frame(key = c("FR", "US"), value = c(20,10))
) %>>% setLegend( position = "right"
) %>>% plotlibrary(rAmChart)
amXYChart(theme = "default", startDuration = 0.5, marginLeft = 46, marginBottom = 35
) %>>% setDataProvider(data.frame( y = c(10,5,-10,-6,15,13,1), x = c(14,3,8,5,-4,1,6),
value = c(59,50,19,65,92,8,16), y2 = c(-5,-15,-4,-5,-10,-2,0),
x2 = c(-3,-8,6,-6,-8,0,-3), value2 = c(44,12,35,168,102,41,16))
) %>>% addValueAxes(position = "bottom", axisAlpha = 0
) %>>% addValueAxes(minMaxMultiplier = 1.2, position = "left", axisAlpha = 0
) %>>% addGraph(balloonText = "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
bullet = "circle", bulletBorderAlpha = 0.2, bulletAlpha = 0.8, lineAlpha=0,
fillAlphas = 0, valueField = "value", xField = "x",yField = "y", maxBulletSize = 100
) %>>% addGraph(balloonText = "x:<b>[[x]]</b>y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
bullet="diamond",bulletBorderAlpha=0.2, bulletAlpha = 0.8, lineAlpha = 0,
fillAlphas = 0,valueField = "value2", xField = "x2", yField = "y2",
maxBulletSize = 100
) %>>% setExport %>>% plotlibrary(rAmChart)
amAngularGaugeChart(theme = "light"
) %>>% addArrow(value = 100
) %>>% addAxe(gaugeAxis (bottomText = "100 km/h", endValue = 220, valueInterval = 10
) %>>% addBand(color = "#00CC00", endValue = 90, startValue = 0
) %>>% addBand(color = "#ffac29", endValue = 130, startValue = 90
) %>>% addBand(color = "#ea3838", endValue = 220, startValue = 130, innerRadius = "95%")
) %>>% setExport %>>% plotlibrary(rAmChart)
amFunnelChart(theme = "light", neckHeight = "30%", neckWidth = "40%", titleField = "title",
valueField = "value", creditsPosition = "bottom-left",
dataProvider = data.frame(title = c("Website visits", "Downloads"),
value = c(300, 123))
) %>>% plotSee http://www.amcharts.com/demos/column-and-line-mix/
library(rAmChart)
amSerialChart(addClassNames = TRUE, theme = "light", autoMargins = FALSE, marginLeft = 30,
marginRight = 8, marginTop = 10, marginBottom = 26, startDuration = 1,
categoryField = "year"
) %>>% setDataProvider(data.frame(year = c(2010, 2011, 2012, 2013, 2014),
income = c(20.4, 20.6, 24.3, 21.5, 22.3),
expenses = c(31.5, 32.4, 25.6, 22.6, 24.9),
dashLengthColumn = c(NA, NA, NA, NA, 5),
alpha = c(NA, NA, NA, NA, 0.2),
additional = c("", "", "", "", "(projection)"))
) %>>% setBalloon(adjustBorderColor = FALSE, horizontalPadding = 10,
verticalPadding = 8,color = "#ffffff"
) %>>% addValueAxes(axisAlpha = 0, position = "left"
) %>>% addGraph(alphaField = "alpha", fillAlphas = 1, title = "Income",
type = "column", valueField = "income",
balloonText = "<span style = 'font-size:12px;'>[[title]] in [[category]]:<br><span style = 'font-size:20px;'>[[value]]</span> [[additional]]</span>",
dashLengthField = "dashLengthColumn"
) %>>% addGraph(id = "graph2", bullet = "round", lineThickness = 3, bulletSize = 7,
balloonText = "<span style = 'font-size:12px;'>[[title]] in [[category]]:<br><span style = 'font-size:20px;'>[[value]]</span> [[additional]]</span>",
bulletBorderAlpha = 1, bulletColor = "#FFFFFF",
useLineColorForBulletBorder = TRUE, bulletBorderThickness = 3,
fillAlphas = 0, lineAlpha = 1, title = "Expenses", valueField = "expenses"
) %>>% setCategoryAxis(gridPosition = "start", axisAlpha = 0, tickLength = 0
) %>>% setExport %>>% plotSee http://www.amcharts.com/demos/exporting-chart-to-image/
library(rAmChart)
amSerialChart(theme = "dark", startDuration = 2, categoryField = "country", depth3D = 40,
angle = 30
) %>>% setDataProvider(data.frame(
country = c("USA", "China", "Japan", "Germany", "UK", "France", "India", "Spain", "Netherlands", "Russia"),
visits = c(3025, 1882, 1809, 1322, 1122, 1114, 984, 711, 665, 580),
color = c("#FF0F00", "#FF6600", "#FF9E01", "#FCD202", "#F8FF01", "#B0DE09", "#04D215", "#0D8ECF", "#0D52D1", "#2A0CD0"))
) %>>% addGraph(balloonText = "<b>[[category]]: [[value]]</b>", fillColorsField = "color",
fillAlphas = 0.85, lineAlpha = 0.1, type = "column", valueField = "visits"
) %>>% setChartCursor(categoryBalloonEnabled = FALSE, cursorAlpha = 0, zoomable = FALSE
) %>>% setCategoryAxis(gridPosition = "start", labelRotation = 45, axisAlpha = 0, gridAlpha = 0
) %>>% setExport %>>% plotSee http://www.amcharts.com/demos/stacked-area/
library(rAmChart)
amSerialChart(theme = "light", marginRight = 30, plotAreaBorderAlpha = 0,
categoryField = "year"
) %>>% setDataProvider(data.frame(
year = 1994:2012,
cars = c(15, 13, 14, 15, 16, 18, 19, 22, 24, 20, 24, 25, 26, 35, 36, 37, 38, 39, 40),
motorcycles = c(15, 13, 14, 15, 16, 18, 19, 22, 24, 20, 24, 25, 26, 35, 36, 37, 38, 39, 40),
bicycles = c(15, 13, 14, 15, 16, 18, 19, 22, 24, 20, 24, 25, 26, 35, 36, 37, 38, 39, 40))
) %>>% setLegend(equalWidths = FALSE, periodValueText = "total: [[value.sum]]", position = "top", valueAlign = "left", valueWidth = 100
) %>>% addValueAxes(stackType = "regular", gridAlpha = 0.07, position = "left",
title = "Traffic incidents"
) %>>% addGraph(balloonText = "<img src = 'http://www.amcharts.com/lib/3/images/car.png' style = 'vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style = 'font-size:14px; color:#000000;'><b>[[value]]</b></span>",
fillAlphas = 0.6, hidden = TRUE, lineAlpha = 0.4, title = "Cars",
valueField = "cars"
) %>>% addGraph(balloonText = "<img src = 'http://www.amcharts.com/lib/3/images/motorcycle.png' style = 'vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style = 'font-size:14px; color:#000000;'><b>[[value]]</b></span>",
fillAlphas = 0.6, lineAlpha = 0.4, title = "Motorcycles", valueField = "motorcycles"
) %>>% addGraph(balloonText = "<img src = 'http://www.amcharts.com/lib/3/images/bicycle.png' style = 'vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style = 'font-size:14px; color:#000000;'><b>[[value]]</b></span>",
fillAlphas = 0.6, lineAlpha = 0.4, title = "Bicycles", valueField = "bicycles"
) %>>% setChartCursor(cursorAlpha = 0
) %>>% setCategoryAxis(startOnAxis = TRUE, axisColor = "#DADADA", gridAlpha = 0.07
) %>>% setGuides(list(guide(category = "2001", toCategory = "2003", lineColor = "#CC0000",
lineAlpha = 1, fillAlpha = 0.2, fillColor = "#CC0000", dashLength = 2,
inside = TRUE, labelRotation = 90,
label = "fines for speeding increased"),
guide(category = "2007", lineColor = "#CC0000", lineAlpha = 1,
dashLength = 2, inside = TRUE, labelRotation = 90,
label = "motorcycle fee introduced"))
) %>>% setExport %>>% plotSee http://www.amcharts.com/demos/waterfall-chart/
library(rAmChart)
amSerialChart(theme = "light", startDuration = 1, columnWidth = 0.6, categoryField = "name"
) %>>% setDataProvider( data.frame(
name = c("Income A", "Income B", "Total Income", "Expenses A", "Expenses B", "Revenue"),
open = c(0, 11.13, 0, 12.92, 8.64, 0),
close = c(11.13, 15.81, 15.81, 15.81, 12.92, 8.64),
color = c("#54cb6a", "#54cb6a", "#169b2f", "#cc4b48", "#cc4b48", "#1c8ceb"),
balloonValue = c(11.13, 4.68, 15.81, 2.89, 4.24, 11.13) )
) %>>% addValueAxes(axisAlpha = 0, gridAlpha = 0.1, position = "left"
) %>>% addGraph(balloonText = "<span style = 'color:[[color]]'>[[category]]</span><br><b>$[[balloonValue]] Mln</b>",
colorField = "color", fillAlphas = 0.8, labelText = "$[[balloonValue]]",
lineColor = "#BBBBBB", openField = "open", type = "column", valueField = "close"
) %>>% addTrendLine(dashLength = 3, finalCategory = "Income B",
finalValue = 11.13, initialCategory = "Income A",
initialValue = 11.13, lineColor = "#888888"
) %>>% addTrendLine(dashLength = 3, finalCategory = "Expenses A", finalValue = 15.81, initialCategory = "Income B", initialValue = 15.81, lineColor = "#888888"
) %>>% addTrendLine(dashLength = 3, finalCategory = "Expenses A",
finalValue = 15.81, initialCategory = "Income B",
initialValue = 15.81, lineColor = "#888888"
) %>>% addTrendLine(dashLength = 3, finalCategory = "Expenses B",
finalValue = 12.92, initialCategory = "Expenses A",
initialValue = 12.92, lineColor = "#888888"
) %>>% addTrendLine(dashLength = 3, finalCategory = "Revenue", finalValue = 8.64,
initialCategory = "Expenses B", initialValue = 8.64, lineColor = "#888888"
) %>>% setCategoryAxis(gridPosition = "start", axisAlpha = 0, gridAlpha = 0.1
) %>>% setExport %>>% plotSee http://www.amcharts.com/demos/candlestick-chart/
library(rAmChart)
amSerialChart(categoryField = "date", theme = "dark", dataDateFormat = "YYYY-MM-DD"
) %>>% setDataProvider(data.frame (date = paste0(2011, "-", 8:11, "-", replicate(4, 1:30)),
open = round(runif(length(paste0(2011, "-", 8:11, "-", replicate(4, 1:30))), 130, 140), 2),
high = round(runif(length(paste0(2011, "-", 8:11, "-", replicate(4, 1:30))), 140, 150), 2),
low = round(runif(length(paste0(2011, "-", 8:11, "-", replicate(4, 1:30))), 120, 130), 2),
close = round(runif(length(paste0(2011, "-", 8:11, "-", replicate(4, 1:30))), 120, 150), 2))
) %>>% addValueAxes(position = "left"
) %>>% addGraph(id = "g1",
balloonText = "Open : <b>[[open]]</b><br>Low =<b>[[low]]</b><br>High =<b>[[high]]</b><br>Close =<b>[[close]]</b><br>",
closeField = "close", fillColors = "#7f8da9", highField = "high",
lineColor = "#7f8da9", lineAlpha = 1, lowField = "low",
fillAlphas = "0.9", negativeFillColors = "#db4c3c", negativeLineColor = "#db4c3c",
openField = "open", title = "Price:", type = "candlestick", valueField = "close"
) %>>% setChartCursor(valueLineEnabled = TRUE, valueLineBalloonEnabled = TRUE
) %>>% setChartScrollbar(parseDates = TRUE
) %>>% addListener("rendered", "function(event) { event.chart.zoomToIndexes(event.chart.dataProvider.length - 10, event.chart.dataProvider.length - 1) }"
) %>>% setExport(position = "bottom-right") %>>% plotSee http://www.amcharts.com/demos/candlestick-chart/
library(rAmChart)
amSerialChart(categoryField = "date", theme = "dark", dataDateFormat = "YYYY-MM-DD"
) %>>% setDataProvider(data.frame (date = paste0(2011, "-", 8:11, "-", replicate(4, 1:30)),
open = round(runif(length(paste0(2011, "-", 8:11, "-", replicate(4, 1:30))), 130, 140), 2),
high = round(runif(length(paste0(2011, "-", 8:11, "-", replicate(4, 1:30))), 140, 150), 2),
low = round(runif(length(paste0(2011, "-", 8:11, "-", replicate(4, 1:30))), 120, 130), 2),
close = round(runif(length(paste0(2011, "-", 8:11, "-", replicate(4, 1:30))), 120, 150), 2))
) %>>% addValueAxes(position = "left"
) %>>% addGraph(id = "g1",
balloonText = "Open : <b>[[open]]</b><br>Low =<b>[[low]]</b><br>High =<b>[[high]]</b><br>Close =<b>[[close]]</b><br>",
closeField = "close", fillColors = "#7f8da9", highField = "high",
lineColor = "#7f8da9", lineAlpha = 1, lowField = "low",
fillAlphas = "0.9", negativeFillColors = "#db4c3c", negativeLineColor = "#db4c3c",
openField = "open", title = "Price:", type = "candlestick", valueField = "close"
) %>>% setChartCursor(valueLineEnabled = TRUE, valueLineBalloonEnabled = TRUE
) %>>% setChartScrollbar(parseDates = TRUE
) %>>% addListener("rendered", "function(event) { event.chart.zoomToIndexes(event.chart.dataProvider.length - 10, event.chart.dataProvider.length - 1) }"
) %>>% setExport(position = "bottom-right") %>>% plotSee http://www.amcharts.com/demos/multiple-data-sets/
library(rAmChart)
firstDate <- Sys.Date()
chartData1 <- as.data.frame(t(sapply(0:20, FUN = function(i)
{
date <- format(firstDate + i, "%m/%d/%Y")
a <- round(runif(1) * (40 + i)) + 100 + i
b <- round(runif(1) * (1000 + i)) + 500 + i * 2
c(date = date, value = a, volume = b)
})))
chartData2 <- as.data.frame(t(sapply(0:20, FUN = function(i)
{
date <- format(firstDate + i, "%m/%d/%Y")
a <- round(runif(1) * (100 + i)) + 200 + i
b <- round(runif(1) * (1000 + i)) + 600 + i * 2
c(date = date, value = a, volume = b)
})))
chartData3 <- as.data.frame(t(sapply(0:20, FUN = function(i)
{
date <- format(firstDate + i, "%m/%d/%Y")
a <- round(runif(1) * (100 + i)) + 200 + i
b <- round(runif(1) * (1000 + i)) + 600 + i * 2
c(date = date, value = a, volume = b)
})))
chartData4 <- as.data.frame(t(sapply(0:20, FUN = function(i)
{
date <- format(firstDate + i, "%m/%d/%Y")
a <- round(runif(1) * (100 + i)) + 200 + i
b <- round(runif(1) * (1000 + i)) + 600 + i * 2
c(date = date, value = a, volume = b)
})))
amStockChart(theme = "light"
) %>>% addDataSet(dataSet(title = "first data set", categoryField = "date",
dataProvider = chartData1) %>>%
addFieldMapping(fromField = "value", toField = "value") %>>%
addFieldMapping(fromField = "volume", toField = "volume")
) %>>% addDataSet(dataSet(title = "second data set", categoryField = "date",
dataProvider = chartData2) %>>%
addFieldMapping(fromField = "value", toField = "value") %>>%
addFieldMapping(fromField = "volume", toField = "volume")
) %>>% addDataSet(dataSet(title = "third data set", categoryField = "date",
dataProvider = chartData3) %>>%
addFieldMapping(fromField = "value", toField = "value") %>>%
addFieldMapping(fromField = "volume", toField = "volume")
) %>>% addDataSet(dataSet(title = "fourth data set", categoryField = "date",
dataProvider = chartData4) %>>%
addFieldMapping(fromField = "value", toField = "value") %>>%
addFieldMapping(fromField = "volume", toField = "volume")
) %>>% addPanel(stockPanel(showCategoryAxis = FALSE, title = "Value", percentHeight = 70) %>>%
addStockGraph(id = "g1", valueField = "value", comparable = TRUE,
compareField = "value", balloonText = "[[title]] =<b>[[value]]</b>",
compareGraphBalloonText = "[[title]] =<b>[[value]]</b>"
) %>>% setStockLegend(periodValueTextComparing = "[[percents.value.close]]%",
periodValueTextRegular = "[[value.close]]")
) %>>% addPanel(stockPanel(title = "Volume", percentHeight = 30) %>>%
addStockGraph(valueField = "volume", type = "column",
fillAlphas = 1) %>>%
setStockLegend(periodValueTextRegular = "[[value.close]]")
) %>>% setChartScrollbarSettings(graph = "g1"
) %>>% setChartCursorSettings(valueBalloonsEnabled = TRUE, fullWidth = TRUE,
cursorAlpha = 0.1, valueLineBalloonEnabled = TRUE,
valueLineEnabled = TRUE, valueLineAlpha = 0.5
) %>>% setPeriodSelector(periodSelector(position = "left") %>>%
addPeriod(period = "MM", selected = TRUE, count = 1, label = "1 month") %>>%
addPeriod(period = "MAX", label = "MAX")
) %>>% setDataSetSelector(position = "left"
) %>>% setPanelsSettings(recalculateToPercents = FALSE
) %>>% plotSee http://www.amcharts.com/demos/multiple-data-sets/
library(rAmChart)
start <- as.POSIXct("01-01-2015", format = "%d-%m-%Y")
end <- as.POSIXct("31-12-2015", format = "%d-%m-%Y")
period <- seq.POSIXt(from = start, to = end, by = "10 min")
n <- length(period)
periodTemp <- seq.POSIXt(from = start, to = end, by = "3 hour")
nTemp <- length(periodTemp)
### Generate mesures ----
charge <- rnorm(n, mean = 500, sd= 200)
charge[ which(charge < 0) ] <- rnorm(length(which(charge < 0)), mean = 200, sd = 10)
temp <- rnorm(nTemp, mean = 15, sd = 10)
dtCharge <- data.table::data.table(charge, date = period)
setkey(dtCharge, date)
dtTemp <- data.table::data.table(temperature = temp, date = periodTemp)
setkey(dtTemp , date)
dp <- dtTemp[dtCharge]
dp[ , date := format(date, "%m-%d-%Y %H:%M:%S")]
nTest <- 1000
sample <- 1:nTest
amStockChart(theme = "default" , dataDateFormat = "MM-DD-YYYY JJ:NN:SS"
) %>>% addDataSet(dataSet(title = "Courbe de charge", categoryField = "date") %>>%
setDataProvider(dp[ sample, ], keepNA = FALSE) %>>%
addFieldMapping(fromField = "charge", toField = "charge") %>>%
addFieldMapping(fromField = "temperature", toField = "temperature") %>>%
addStockEvent( date = "01-02-2015 23:00:00", type = "sign", graph ="g1",
text = "I am a stockEvent", description = "I am a property of a DataSet")
) %>>% addPanel(stockPanel(showCategoryAxis = FALSE, title = "Charge", percentHeight = 70) %>>%
addStockGraph(id = "g1", valueField = "charge", comparable = TRUE,
compareField = "charge", balloonText = "[[title]] =<b>[[value]]</b>",
compareGraphBalloonText = "[[title]] =<b>[[value]]</b>"
) %>>% setStockLegend(periodValueTextComparing = "[[percents.value.close]]%",
periodValueTextRegular = "[[value.close]]")
) %>>% addPanel(stockPanel(title = "Temperature", percentHeight = 30) %>>%
addStockGraph(valueField = "temperature", fillAlphas = 1) %>>%
setStockLegend(periodValueTextRegular = "[[value.close]]")
) %>>% setChartScrollbarSettings(graph = "g1"
) %>>% setChartCursorSettings(valueBalloonsEnabled = TRUE, fullWidth = TRUE,
cursorAlpha = 0.1, valueLineBalloonEnabled = TRUE,
valueLineEnabled = TRUE, valueLineAlpha = 0.5
) %>>% setPeriodSelector(periodSelector(position = "left") %>>%
addPeriod(period = "MM", selected = TRUE, count = 1, label = "1 month") %>>%
addPeriod(period = "MAX", label = "MAX")
) %>>% setDataSetSelector(position = "left"
) %>>% setCategoryAxesSettings(minPeriod = "ss"
) %>>% setPanelsSettings(recalculateToPercents = FALSE
) %>>% plot